//海报
<template>
  <view class="viewport">
    <view class="top_container">
      <view class="search_container">
        <input class="search_input" inputmode="search" confirm-type="search" placeholder="点击搜索主题" v-model="fileName"
          @confirm="search" />
      </view>
    </view>

    <view class="screen_container" v-if="!isCollect">
      <DaDropdown ref="daDropdownRef" v-model:dropdownMenu="dropdownMenuList" themeColor="#54B9CC" textColor="#394259"
        itemJustifyContent="flex-end" @confirm="handleConfirm" @close="handleClose" @open="handleOpen">
      </DaDropdown>
    </view>

    <view class="wrap">
      <view class="nodata" v-if="datalist.length==0 &&!isLoading">
        <image class="no_data_img" src="../../static/images/blank.png"></image>
        <text class="no_data_text">暂无数据</text>
      </view>
      <view class="item-container">
        <view v-for="(item,index) in datalist" :key="index" class="item" @click="previewImage(item)">
          <view class="case-item">
            <view class="image_container">
              <image mode="aspectFill" class="image_good" :src="item.attachId">
              </image>
              <view class="tag">HUIDA 惠达</view>
            </view>
            <view class="text">{{item.fileName}}</view>
          </view>

        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { getFilePage, getClasstree } from '@/services/file'
  import { baseURL } from '@/utils/http'
  import Func from '@/utils/func'
  import { queryFileCollectPage } from '@/services/collect'
  import { useMemberStore } from '@/stores'

  const query = defineProps<{ collect : boolean }>()
  const userInfo : any = useMemberStore().getUserInfo()
  import DaDropdown from '@/components/da-dropdown/index.vue'
import { getFileType } from '@/utils/upload'
  //是否仅展示收藏
  const isCollect = ref(false)

  // 海报
  const dictTypeCode = 4;

  const screenList1 = ref<any>([])
  const screenList2 = ref<any>([])

  //记载中
  const isLoading = ref(true)
  //数据源
  const datalist = ref<any>([])

  // 一级分类
  const firstClass = ref<any>([])
  // 二级分类
  const secondClass = ref<any>([])

  const fileName = ref('');
  const daDropdownRef = ref(null)
  const dropdownMenuList = ref([

    {
      title: '分类筛选',
      type: 'picker',
      prop: 'god1',
      showAll: true,
      showIcon: true,
      field: {
        label: 'label',
        value: 'value',
        children: 'children',
      },

    },

  ])

  let firstClassCode = '';
  let secondClassCode = '';
  let thirdClassCode = '';


  function getChildrenByCode(classTrees : any[], classtreeCode : string) : any[] {
    const foundItem = classTrees.find(item => item.classtreeCode === classtreeCode);
    return foundItem ? foundItem.childList : [];
  }

  onLoad(() => {
    isCollect.value = query.collect
    getOptions()
    search()
  })
  const search = () => {
    if (isCollect.value) {
      //仅展示我的收藏数据
      queryFileCollectPage({ dictTypeCode, "userCode": userInfo.userCode })
        .then((res : any) => {
          console.log("ok:");
          console.log(res);
          datalist.value = res.list;
        })
      return
    }
    const params = {
      dictTypeCode,
      firstClassify: firstClassCode,
      secondClassify: secondClassCode,
      thirdClassify: thirdClassCode,
      fileName: fileName.value
    }
    getFilePage(params).then((res : any) => {
      isLoading.value = false
      console.log(res)
      datalist.value = res.list
    }).catch(e => {
      isLoading.value = false
    })
  }


  //递归处理 分类项
  const transformTree = (data : any) => {
    return data.map((item : any) => {
      // 创建新对象并替换字段
      const newItem : any = {
        label: item.classtreeName,
        value: item.classtreeCode,
        // ...item // 保留其他可能存在的属性
      };

      // 递归处理子节点
      if (item.childList && item.childList.length > 0) {
        newItem.children = transformTree(item.childList);
      }

      return newItem;
    });
  }
  //筛选确认
  function handleConfirm(v : any, selectedValue : any) {
    console.log('handleConfirm ==>', selectedValue.god1)
    firstClassCode = selectedValue.god1[0]
    secondClassCode = selectedValue.god1[1]
    thirdClassCode = selectedValue.god1[2]
    search()
  }
  function handleClose(v : any, callbackMenuList : any) {
    console.log('handleClose ==>', v, callbackMenuList)
  }
  function handleOpen(v : any) {
    console.log('handleOpen ==>', v)
  }
  //同步获取 筛选项
  async function getOptions() : Promise<any> {
    // 添加加载效果
    daDropdownRef.value?.setMenuLoading('god1', true)

    const firstClasstree = await getClasstree({ goodsClass: 'B2B' })
    let options = []
    if (Func.notEmpty(firstClasstree)) {
      options = transformTree(firstClasstree)
    }
    console.log(options)
    // 通过方法更新异步数据
    daDropdownRef.value?.updateMenu('god1', options, 'options')
  }
  /**
   *
   */
  const previewImage = (item : any) => {
    console.log(item)
    uni.navigateTo({
      url: `/pagesMember/mediaPreview/mediaPreview?data=${JSON.stringify({
        fileCtype: getFileType(item.attachId),
        fileUrl: item.attachId,
        fileCode: item.fileCode,
        coverUrl: item.coverUrl,
        dictTypeCode,
        showOption: true,
        isCollect: isCollect.value,
        fileCollectCode: item.fileCollectCode
      })}`
    })
  }
</script>

<style lang="scss">
  .viewport {
    display: flex;
    flex-direction: column;

  }

  .top_container {
    margin: 10rpx 15rpx;
    border-radius: 30rpx;
    border: 2rpx solid #61D7ED;
    // border-image: linear-gradient(180deg, rgba(97, 215, 237, 1), rgba(84, 185, 204, 1)) 2 2;
    display: flex;
  }


  .search_container {

    flex-direction: column;
    flex-grow: 1;
    padding: 15rpx;
    border-radius: 20rpx;
    margin: 5rpx 20rpx;
  }

  .search_input {
    background-color: white;
    font-size: 26upx;
  }

  .screen_container {
    margin-top: 10rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
    width: 100vw;
border-bottom: 1rpx solid #F9FAFB;
  }



  .selelct {
    width: 35vw;
    border-radius: 10rpx;
    text-align: center;
    background-color: white;
    margin-right: 15rpx;
  }



  .lines {
    width: 1px;
    background-color: gray;
  }




  .nodata {
    display: flex;
    height: 80vh;
    align-items: center;
    flex-direction: column;

  }

  .no_data_img {
    margin-top: 25vh;
    height: 84rpx;
    width: 100rpx;
  }

  .no_data_text {
    margin-top: 30rpx;
    color: darkgray;
  }

  .item-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  //奇数列 仅第一层生效
  .item-container>view:nth-child(odd) {
    padding-left: 15rpx;
    padding-right: 8rpx;
  }

  //偶数列 仅第一层生效
  .item-container>view:nth-child(even) {
    padding-right: 15rpx;
    padding-left: 8rpx;
  }

  .item {
    width: 50%;
  }

  .case-item {

    border-radius: 16rpx 16rpx 16rpx 16rpx;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 15rpx;
    padding-top: 15rpx;
    align-items: center;
    box-sizing: border-box;
    border-radius: 8rpx;
    background-color: #F9FAFB;


    .image_container {
      position: relative;
      width: 100%;
      height: fit-content;
      box-sizing: border-box;
      border-radius: 16rpx;
      border: 4rpx solid #00C1D1;
      overflow: hidden;
      /* 设置溢出隐藏 */

      .image_good {
        width: 100%;
        height: 320rpx;
      }

      .tag {
        text-align: center;
        line-height: 40rpx;
        height: 40rpx;
        width: 160rpx;
        left: 0;
        top: 0;
        color: white;
        font-size: 20rpx;
        position: absolute;
        border-top-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        background-color: #00C1D1;
      }

    }

    .text {
      text-align: left;
      margin-top: 40rpx;
      font-size: 24upx;
      color: #3d3d3d;
    }
  }
</style>
